import React from 'react'
import BasicThead from "../../../../shared-components/Tables/BasicThead/BasicThead"
import {connect,} from 'react-redux'
import LocalStorageService from "../../../../utils/LocalStorageService";
import FetchListComponent from "../../../../shared-components/FetchListComponent/FetchListComponent";
import constants, {GiftMapper} from "../../../../utils/constants";
import {Toast} from "antd-mobile";
import {fetchItemConsumeLogReq} from "../../../../apis/goApis";

const uid = LocalStorageService.get('userid')
class ItemConsume extends React.Component {

    // const list = this.props.itemConsumeList
    constructor(props) {
        super(props)
        this.state = {
            p: 0,
            end: false,
            Flag: 1,
            list: [],
            index: 0,
        }
        this.tHead = [
            {
                title: '时间', dataIndex: 'CreateT',
            },
            {
                title: '专家', dataIndex: 'Anchorname',
            },
            {
                title: '赛事', dataIndex: 'Game',
            },
            {
                title: '礼物', dataIndex: 'Propid',
            },
            {
                title: '额度', dataIndex: 'Cost',
            },
        ]
    }

    onTouchEnd = () => {

        const ctn = this.listCtn
        const last = ctn.lastElementChild
        const end = this.state.end
        const rect = last.getBoundingClientRect()
        const cH = document.documentElement.clientHeight
        const top = rect.bottom
        const endCallback = () => {
            Toast.info('已经没有数据了')
            this.setState({
                end: true,
            })
        }
        if (cH > top) {
            const cP = this.state.p
            const nP = cP + 1
            // const Flag = this.state.Flag
            this.setState({
                p: nP,
            }, () => this.fetchList())
        }


    }

    fetchList = () => {
        const end = this.state.end
        if (end) {
            Toast.info('已经没有数据了')
            return
        }
        const params = {
            p: this.state.p,
            uid: LocalStorageService.get('userid'),
            Flag: this.state.Flag,
        }
        fetchItemConsumeLogReq(params)
            .then(res => {
                const list = res.data.ok.data
                if (list.length === 0) {
                    Toast.info('已经没有数据了')
                    this.setState({
                        end: true,
                    })
                } else {
                    this.setState({
                        list: [...this.state.list, ...res.data.ok.data,]
                    })
                }
            })
    }

    componentDidMount() {
        this.fetchList()
    }

    onTabClick = (to) => {
        const i = this.state.index
        if (i === to) return
        this.setState({
            p: 0,
            Flag: to === 0 ? 1 : 0,
            list: [],
            index: to,
        }, () => {
            this.fetchList()
        })
    }

    render() {

        const list = this.state.list
        const loading = <div style={{textAlign: 'center', width: '100%', padding: '8px'}}><p>加载中</p></div>
        const noData = <div style={{textAlign: 'center', width: '100%', padding: '8px'}}><p>暂无数据</p></div>
        const trTemplate = (list.map((item, index) => {
            if (item.Propid === 10001) return null
            return (
                <tr key={index}>
                    {this.tHead.map((head, i) => {

                        const mark = head.dataIndex

                        let value = item[mark]

                        if (mark === 'CreateT') {
                            value = value.slice(0, 10)
                        }

                        if (mark === 'Propid') {
                            // try {
                            //     value = GiftMapper[value].name
                            // } catch (e) {
                            //     if (value === 10001) {
                            //         value = constants.couponList[value].name
                            //     }
                            // }
                            let id = item[mark]
                            if (id < 9) {
                                value = constants.giftList[value].name
                            } else {
                                value = GiftMapper[`gift_${item[mark]}`]?.name
                            }

                            let dealTypeMapper = {
                                // 0=ai或聊天，1=方案打赏，2=方案购买
                                0: '聊天',
                                1: '打赏方案',
                                2: '购买方案',
                            }
                            value = <div>
                                {dealTypeMapper[item.Detailtype]}
                                <br/>
                                {value}
                            </div>
                        }

                        return <td key={i}>{value}</td>

                    })}
                    {/*<td>{item.time}</td>*/}
                    {/*<td>{item.star}</td>*/}
                    {/*<td>{item.category}</td>*/}
                    {/*<td>{item.gift}</td>*/}
                    {/*<td>{item.price}</td>*/}
                </tr>
            )
        }))

        const table = <table className='basic-table' onTouchEnd={e => this.onTouchEnd(e)}>
            <BasicThead tHead={this.tHead}/>
            <tbody ref={el => this.listCtn = el}>
            {trTemplate}
            </tbody>
        </table>
        const tabIndex = this.state.index
        return (
            <>
                <div
                    className='flex-space-between-align-center bg-white'
                    style={{
                        marginTop: '1px',
                    }}
                >
                    <div
                        className='flex-1 text-align-center pd-t-b-12px'
                        style={{color: tabIndex === 0 ? '#FFA500' : 'rgba(51, 51, 51, 0.6)',}}
                        onClick={() => this.onTabClick(0)}
                    >
                        方案消费
                    </div>
                    <div
                        className='flex-1 text-align-center pd-t-b-12px'
                        style={{color: tabIndex === 1 ? '#FFA500' : 'rgba(51, 51, 51, 0.6)',}}
                        onClick={() => this.onTabClick(1)}
                    >
                        礼物消费
                    </div>
                </div>
                {list.length === 0
                    ? this.state.end
                        ? noData : loading
                    : table}
            </>
        )
        // const render = list => {
        //
        //     if (list.length === 0) {
        //         return <div style={{textAlign: 'center', width: '100%', padding: '8px'}}><p>暂无数据</p></div>
        //     }
        //
        //     const trTemplate = (list.map((item, index) => {
        //         if (item.Propid === 10001) return null
        //         return (
        //             <tr key={index}>
        //                 {this.tHead.map((head, i) => {
        //
        //                     const mark = head.dataIndex
        //
        //                     let value = item[mark]
        //
        //                     if (mark === 'CreateT') {
        //                         value = value.slice(0, 10)
        //                     }
        //
        //                     if (mark === 'Propid') {
        //                         // try {
        //                         //     value = GiftMapper[value].name
        //                         // } catch (e) {
        //                         //     if (value === 10001) {
        //                         //         value = constants.couponList[value].name
        //                         //     }
        //                         // }
        //                         let id = item[mark]
        //                         if (id < 9) {
        //                             value = constants.giftList[value].name
        //                         } else {
        //                             value = GiftMapper[`gift_${item[mark]}`]?.name
        //                         }
        //
        //                         let dealTypeMapper = {
        //                             // 0=ai或聊天，1=方案打赏，2=方案购买
        //                             0: '聊天',
        //                             1: '打赏方案',
        //                             2: '购买方案',
        //                         }
        //                         value = <div>
        //                             {dealTypeMapper[item.Detailtype]}
        //                             <br/>
        //                             {value}
        //                         </div>
        //                     }
        //
        //                     return <td key={i}>{value}</td>
        //
        //                 })}
        //                 {/*<td>{item.time}</td>*/}
        //                 {/*<td>{item.star}</td>*/}
        //                 {/*<td>{item.category}</td>*/}
        //                 {/*<td>{item.gift}</td>*/}
        //                 {/*<td>{item.price}</td>*/}
        //             </tr>
        //         )
        //     }))
        //
        //     return (
        //         <table className='basic-table' onTouchEnd={e => this.onTouchEnd(e)}>
        //             <BasicThead tHead={this.tHead}/>
        //             <tbody ref={el => this.listCtn = el}>
        //             {trTemplate}
        //             </tbody>
        //         </table>
        //     )
        // }
        //
        // return <FetchListComponent
        //     fetchList={fetchList}
        //     params={params}
        //     list={list}
        //     render={render}
        //     unmountMethod={unmountMethod}
        // />
    }
}

const mapState = (state) => ({
    // coinConsumeList: state.user.
    itemConsumeList: state.user.itemConsumeList,
})

const mapDispatch = ({user: {doFetchItemConsumeLog, doEmptyItemConsumeList,},}) => ({
    doFetchItemConsumeLog: (payload) => doFetchItemConsumeLog(payload),
    doEmptyItemConsumeList: () => doEmptyItemConsumeList(),
})

export default connect(mapState, mapDispatch)(ItemConsume)
